<template>
  <div>
    <div class="cart-wrap">
      <van-sidebar v-model="activeKey" >
        <van-sidebar-item title="热门" />
        <van-sidebar-item title="步行街" />
        <van-sidebar-item title="NBA" dot/>
        <van-sidebar-item title="CBA" />
        <van-sidebar-item title="搞笑趣味" />
        <van-sidebar-item title="影视娱乐" />
        <van-sidebar-item title="游戏" dot/>
        <van-sidebar-item title="晒照片" />
        <van-sidebar-item title="装备" />
        <van-sidebar-item title="国际足球" />
        <van-sidebar-item title="中国足球" />
        <van-sidebar-item title="数码" />
        <van-sidebar-item title="汽车"dot />
        <van-sidebar-item title="综合体育" />
        <van-sidebar-item title="城市"/>
        <van-sidebar-item title="站务管理" />
      </van-sidebar>

      <div class="cart-wrap-right" >
      <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if="activeKey == 0 || activeKey == 1">
        <van-grid-item icon="https://i1.hoopchina.com.cn//blogfile/201512/23/BbsImg145086444416448_110*90.png" text="步行街" />
        <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/12/BbsImg144462016469330_110*88.png" text="湿乎乎的话题" />
        <van-grid-item icon="https://i3.hoopchina.com.cn/hupupc/bbs/998/74940960814998/thread_74940960814998_20200423144142_1373966463.png" text="树洞" />
      </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if="activeKey == 0 || activeKey == 6">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201706/08/BbsImg149690372235805_110x90big.png" text="王者荣耀" />
          <van-grid-item  icon="https://i2.hoopchina.com.cn//blogfile/201707/31/BbsImg150148286586887_110x90.png" text="英雄联盟" />
          <van-grid-item  icon="https://i2.hoopchina.com.cn//blogfile/201804/02/BbsImg152265409211266_81443878817045_110x90.png" text="绝地求生" />
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if="activeKey == 0 || activeKey == 1 || activeKey == 7">
          <van-grid-item  icon="https://i2.hoopchina.com.cn//blogfile/201707/12/BbsImg149984304433511_256244656866193_110x90.png" text="IT数码" />
          <van-grid-item  icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487875072432_110*88.png" text="影视区" v-if="activeKey == 0"/>
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201512/18/BbsImg145042526145353_110*90small.png" text="晒晒照片" />
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if="activeKey == 0 || activeKey == 2">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487871213401_110*88.png" text="湖人专区" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg14448787154102_110*88.png" text="快船专区" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487871755546_110*88.png" text="勇士专区" v-if="activeKey == 2"/>
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if=" activeKey == 2">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487871510357_110*88.png" text="马刺专区" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg14448787134226_110*88.png" text="绿军专区"/>
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487871581845_110*88.png" text="雷霆专区" />
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if=" activeKey == 2">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487874515621_110*88.png" text="骑士专区" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487871972563_110*88.png" text="76人专区"/>
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487874744593_110*88.png" text="猛龙专区" />
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if=" activeKey == 3">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/20/BbsImg144531324240427_110*88small.png" text="福建中华鲟" />
        </van-grid>

        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if=" activeKey == 5">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487875072432_110*88.png" text="影视区" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201808/08/BbsImg_103007754951988_1533712236_s_18859_o_w_110_h_90_76186.png" text="娱乐圈" />
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/15/BbsImg144487875157916_110*88.png" text="ACG区" />
        </van-grid>
        <van-grid :column-num="3" :border="false" icon-size="50" clickable gutter="18px" v-if=" activeKey == 5">
          <van-grid-item icon="https://i2.hoopchina.com.cn//blogfile/201510/12/BbsImg144461983092320_110*88.png" text="音乐区" />
        </van-grid>
      </div>






    </div>

  </div>

</template>

<script>

    export default {
        name: "CategoryComponent",
        data() {
          return {
            activeKey: 0,
            show:true
          };
        },

    }
</script>

<style scoped>
  .cart-wrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .cart-wrap-right{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    text-align: center;
  }
</style>
